<template>
  <page-header-wrapper>
    <a-card>
      <JeepaySearchForm v-if = "$access('ENT_UR_ROLE_SEARCH')" :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <jeepay-text-up v-model:value="vdata.searchData.roleId" :placeholder="'角色ID'" />
        <jeepay-text-up v-model:value="vdata.searchData.roleName" :placeholder="'角色名称'" />
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="roleId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
            <a-button v-if="$access('ENT_UR_ROLE_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'roleId'"><b>{{ record.roleId }}</b></template> <!-- 自定义插槽 -->
          <template v-if="column.key == 'op'">
            <!-- 操作列插槽 -->
            <a-button v-if="$access('ENT_UR_ROLE_EDIT')" type="link" style="padding-left: 10px; padding-right: 10px;" @click="editFunc(record.roleId)">修改</a-button>
            <a-button v-if="$access('ENT_UR_ROLE_DEL')" type="link" style="color: red" @click="delFunc(record.roleId)">删除</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <!-- 新增 / 修改 页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script lang="ts" setup>
import { API_URL_ROLE_LIST, req } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import {ref, reactive, getCurrentInstance} from 'vue'
// 获取全局函数
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const tableColumns = reactive([// key为必填项，用于标志该列的唯一
  {key: 'roleId', title: '角色ID',sorter: true,scopedSlots: { customRender: 'roleIdSlot' }},
  {key: 'roleName',title: '角色名称',dataIndex: 'roleName',sorter: true},
  {key: 'op', title: '操作', width: '200px',fixed: 'right',align: 'center',scopedSlots: { customRender: 'opSlot' }}
])

const infoAddOrEdit = ref()
const infoTable = ref()
const vdata =  reactive({
  tableColumns: tableColumns,
  searchData: {} as any,
  btnLoading: false
})
    // 请求table接口数据
function reqTableDataFunc(params){
  return req.list(API_URL_ROLE_LIST, params)
}

function searchFunc() { // 点击【查询】按钮点击事件
  vdata.btnLoading = true // 打开查询按钮上的loading
  infoTable.value.refTable(true)
}

function addFunc() { // 业务通用【新增】 函数
  infoAddOrEdit.value.show()
}

function editFunc (recordId) { // 业务通用【修改】 函数
  infoAddOrEdit.value.show(recordId)
}

function delFunc(recordId) { // 业务通用【删除】 函数
  $infoBox.confirmDanger('确认删除？', '', () => {
    // 需要【按钮】loading 请返回 promise对象， 不需要请直接返回null
    return req.delById(API_URL_ROLE_LIST, recordId).then(res => {
      $infoBox.message.success('删除成功！')
      infoTable.value.refTable(false)
    })
  })
}
</script>
